<!--
 @description
 @fileName OrderItem.vue
 @author zengqiongying
 @created 2022/08/08 14:32:18
-->
<template>
  <div class="o-item" @click="handleClick">
    <div class="o-head">
      <div class="source">{{ getDictName(oData.orderSource,'ORDER_SOURCE') }}</div>
      <div class="code">{{ oData.retailOrderCode }}</div>
      <div class="icon">{{ getDictName(oData.state,'STATUS') }}</div>
      <!-- :class="{'grey':oData.state ==='00'}" -->
    </div>
    <div class="o-content">
      <div class="title">{{ oData.consumerName }}</div>
      <div class="con">联系电话：{{ oData.consumerPhone }}</div>
      <div class="con">收货地址：{{ oData.receiverAddress }}</div>
      <div class="con">制单日期：{{ oData.createTime | filterTime }}</div>
    </div>
  </div>
</template>

<script>
import { parseTime } from '@/utils'
export default {
  name: 'OrderItem',
  filters: {
    filterTime(val) {
      return parseTime(val, '{y}-{m}-{d} {h}:{i}:{s}')
    }
  },
  props: {
    oData: {
      type: [String, Object],
      default: ''
    },
    dictData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {

    }
  },

  computed: {},

  created() {},
  activated() {},

  mounted() {},

  methods: {
    getDictName(val, dictTypeCode) {
      const data = this.dictData[dictTypeCode]
      if (data && data.length) {
        const obj = data.find(v => v.dictCode === val)
        return (obj && obj.dictName) || val
      }
      return val
    },
    handleClick() {
      this.$router.push({
        path: '/my/order/detail/' + this.oData.orderId
      })
    }
  }
}

</script>
<style lang='less' scoped>
.o-item{
  margin-bottom: 16px;
  padding: 0 16px;
  border-radius: 16px;
  background: #FFFFFF;
  .o-head{
    border-bottom: 1px solid #EFF2F7;
    padding: 12px 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    .source{
      height: 20px;
      line-height: 20px;
      font-size: 14px;
      font-weight: bold;
      color: #3C4458;
      margin-right: 18px;
    }
    .code{
      flex: 1;
      font-size: 14px;
      color: #7D8091;
      line-height: 20px;
      height: 20px;
    }
    .icon{
      min-width: 50px;
      padding: 0 6px;
      height: 20px;
      line-height: 20px;
      text-align: center;
      color: rgba(0, 200, 180, 1);
      background:rgba(0, 200, 180, .1);
      border-radius: 6px;
      margin-left: 10px;
      &.grey{
        color:#7D8091 ;
        background: rgba(52, 54, 64, .1);
      }
    }
  }
  .o-content{
    padding: 16px 0;
    line-height: 18px;
    color: #7D8091;
    font-size: 12px;
    .title{
      font-size: 18px;
      font-weight: bold;
      color: #111111;
      line-height: 25px;
      margin-bottom: 10px;
    }
    .con{
      margin-bottom: 6px;
      &:last-child{
        margin-bottom: 0;
      }
    }
  }
}
</style>
